<template>
    <div>
        <navBar class="navBar" @setSearch="setSearch" :search="search"></navBar>
        <div class="content">
            <div class="title">
                <div class="text">{{ videoTypeData[videoType] }}</div>
            </div>
            <ul class="anime-header-list">
                <li class="anime-header-list-element" v-for="(value, index) in videoTypeData">
                    <div class="pointer" @click="getVideoType(index)">{{ value }}</div>
                </li>
            </ul>
        </div>
        <div class="content grid" v-loading="loading" v-if="true || !loading && (videoList.length != 0)">
            <div v-for="item in videoFilterList" @click="gotoVideo(item)" class="videoBox">
                <div class="box">
                    <div class="boxContent">
                        <video :src="item.videoAddress" class="video" preload="auto" loop ref="video"></video>
                    </div>
                </div>
                <div>{{ item.videoName }}</div>
            </div>
        </div>
        <el-empty description="没有视频" v-else></el-empty>
    </div>
</template>

<script>
import navBar from '@/components/navBar.vue'
import { recommend } from '@/api/video'
export default {
    components: {
        navBar
    },
    data() {
        return {
            videoType: 0,
            videoTypeData: ['全部', '学习', '运动', '搞笑', '动画', '电影', '游戏', '音乐', '生活'],
            loading: false,
            videoList: new Array(),
            search: ''
        }
    },
    mounted() {
        if (this.$route.params.search) {
            this.search = this.$route.params.search
        }
        this.getVideo()
    },
    computed: {
        videoFilterList() {
            let arr = this.videoList
            if (this.videoType != 0) {
                arr = arr.filter(item => item.videoClassificationId == (this.videoType - 1))
            }
            if (this.search.trim()) {
                arr = arr.filter(item => item.videoName?.includes(this.search))
            }
            return arr
        }
    },
    methods: {
        getVideo() {
            this.loading = true
            recommend().then(res => {
                this.videoList = res.data
            }).finally(
                () => { this.loading = false }
            );
        },
        setSearch(str) {
            this.search = str
        },
        getVideoType(index) {
            this.videoType = index
        },
        gotoVideo(value) {
            this.$store.commit('videoData/setVideoData', value)
            this.$router.push({ path: '/video' })
        }
    }
}
</script>

<style scoped>
.navBar {
    position: sticky;
    top: -178px;
    z-index: 1;
}

.anime-header-list {
    height: 72px;
    margin: 0px;
    display: flex;
    list-style-type: none;
    float: right;
}

.anime-header-list .anime-header-list-element {
    margin: 20px 25px 20px 0px;
    display: flex;
    font-size: 15px;
    align-items: center;
}

.anime-header-list .anime-header-list-element:nth-child(n+2)::before {
    content: "|";
    margin-right: 25px;
    transform: skewX(-15deg)
}

.anime-header-list-element:hover {
    margin-top: 22px;
}

.content {
    width: 80%;
    min-width: 1100px;
    margin: auto;
}

.title {
    width: 70px;
    height: 42px;
    margin: 15px 0px 15px 22px;
    background-color: skyblue;
    float: left;
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 0px 0px 15px 0px;
    position: relative;
    transform: skewX(-20deg);
}

.title::before {
    content: "";
    position: absolute;
    left: -21px;
    height: 100%;
    width: 30px;
    background-color: skyblue;
    transform: skewX(20deg);
    border-radius: 0px 0px 0px 15px;
}

.title::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle at 100% 100%,
            transparent,
            transparent 15px,
            skyblue 15px);
    top: 0;
    right: -15px;
}

.text {
    transform: skewX(20deg);
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
}

.videoBox {
    overflow: hidden;
    border-radius: 10px;
    background-color: rgba(125, 125, 125, 0.5);
}

.videoBox>div:last-child{
    padding: 0 10px;
}

.box {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.boxContent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: gray;
}

.video {
    height: 100%;
    width: 100%;
}

.pointer {
    color: black;
}

.pointer:hover {
    cursor: pointer;
    color: gray;
}
</style>